{% extends "admin/base.html" %}

{% block title %}{% if route %}编辑路径{% else %}添加路径{% endif %} - 地标和路径管理系统{% endblock %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>{% if route %}编辑路径{% else %}添加路径{% endif %}</h1>
        <a href="/admin/routes" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> 返回列表
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <form id="route-form" method="post" action="/admin/routes/save">
                {% if route %}
                <input type="hidden" name="id" value="{{ route.id }}">
                {% endif %}

                <div class="mb-3">
                    <label for="name" class="form-label">名称 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="name" name="name" required
                           value="{% if route %}{{ route.name }}{% endif %}">
                </div>

                <div class="mb-3">
                    <label class="form-label">包含地标</label>
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5>可选地标</h5>
                                    <div class="list-group" id="available-landmarks">
                                        {% for landmark in landmarks %}
                                        <div class="list-group-item list-group-item-action" 
                                             data-id="{{ landmark.id }}" 
                                             data-name="{{ landmark.name }}"
                                             {% if route and landmark.id in route.landmarks %}style="display:none;"{% endif %}>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h6 class="mb-1">{{ landmark.name }}</h6>
                                                    <small>{{ landmark.lat }}, {{ landmark.lng }}</small>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-primary add-landmark">
                                                    <i class="bi bi-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5>已选地标</h5>
                                    <div class="list-group" id="selected-landmarks">
                                        {% if route %}
                                            {% for landmark_id in route.landmarks %}
                                                {% for landmark in landmarks %}
                                                    {% if landmark.id == landmark_id %}
                                                    <div class="list-group-item list-group-item-action" 
                                                         data-id="{{ landmark.id }}" 
                                                         data-name="{{ landmark.name }}">
                                                        <div class="d-flex justify-content-between align-items-center">
                                                            <div>
                                                                <h6 class="mb-1">{{ landmark.name }}</h6>
                                                                <small>{{ landmark.lat }}, {{ landmark.lng }}</small>
                                                            </div>
                                                            <button type="button" class="btn btn-sm btn-danger remove-landmark">
                                                                <i class="bi bi-dash"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endfor %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="landmarks" name="landmarks" 
                           value='{% if route %}{{ route.landmarks|tojson }}{% else %}[]{% endif %}'>
                </div>

                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $(document).ready(function() {
        // 添加地标到路径
        $(document).on('click', '.add-landmark', function() {
            const landmarkItem = $(this).closest('.list-group-item');
            const landmarkId = landmarkItem.data('id');
            const landmarkName = landmarkItem.data('name');

            // 添加到已选列表
            const selectedItem = landmarkItem.clone();
            selectedItem.find('.add-landmark').removeClass('add-landmark btn-primary').addClass('remove-landmark btn-danger');
            selectedItem.find('.bi-plus').removeClass('bi-plus').addClass('bi-dash');

            $('#selected-landmarks').append(selectedItem);

            // 从可选列表中移除
            landmarkItem.hide();

            // 更新隐藏字段
            updateLandmarksField();
        });

        // 从路径中移除地标
        $(document).on('click', '.remove-landmark', function() {
            const landmarkItem = $(this).closest('.list-group-item');
            const landmarkId = landmarkItem.data('id');

            // 从已选列表中移除
            landmarkItem.remove();

            // 添加回可选列表
            const availableItem = $('#available-landmarks').find(`[data-id="${landmarkId}"]`);
            availableItem.show();

            // 更新隐藏字段
            updateLandmarksField();
        });

        // 更新地标隐藏字段
        function updateLandmarksField() {
            const selectedIds = [];
            $('#selected-landmarks .list-group-item').each(function() {
                selectedIds.push($(this).data('id'));
            });

            $('#landmarks').val(JSON.stringify(selectedIds));
        }
    });
</script>
{% endblock %}
